Execute each of these cells in order, such as with Shift+Enter

First, load D3Sankey:



In [ ]:

    
from ipythond3sankey.widgets import D3Sankey

Then, create an instance of D3Sankey:



In [ ]:

    
d3sankeyExample = D3Sankey(
    nodes = [
        {'name': 'A'},
        {'name': 'B'},
        {'name': 'C'},
    ],
    links = [
        {'source': 0, 'target': 1, 'value': 2},
        {'source': 0, 'target': 2, 'value': 3},
    ],
    height = 300,
    width = 600
)

Display the widget:



In [ ]:

    
d3sankeyExample

You should see a Sankey diagram with 3 nodes and 2 flows.

Now, you can update the nodes and links:



In [ ]:

    
d3sankeyExample.nodes[0]['name'] = 'Node A'
d3sankeyExample.send_state()

You should see the label of the left-hand node change.



In [ ]:

    
d3sankeyExample.nodes.append({'name': 'D'})
d3sankeyExample.links.append({'source': 3, 'target': 1, 'value': 1})
d3sankeyExample.send_state()

You should see a new node and link appear

Node that send_state() is required when changing the contents of nodes and links. Changing properties directly automatically updates the diagram (although currently the only other properties are the dimensions and margins, which are not updated onces the diagram has been created).

Here is an example of changing the Sankey diagram interactively:



In [ ]:

    
from IPython.html import widgets

def update(name, value):
    d3sankeyExample.links[0]['value'] = value
    d3sankeyExample.send_state()

w = widgets.FloatSlider()
w.on_trait_change(update, 'value')
widgets.VBox([w, d3sankeyExample])

D3Sankey Widget